import {init} from 'snabbdom/build/package/init'
import {h} from 'snabbdom/build/package/h'
// 设置样式的模块
import { styleModule } from 'snabbdom/build/package/modules/style'
// 绑定事件的模块
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'
const patch = init([
    styleModule,
    eventListenersModule
])
const originalData = [
	{
		rank: 1,
		title: "肖申克的救赎 ",
		desc:
			"20世纪40年代末，小有成就的青年银行家安迪（蒂姆·罗宾斯 Tim Robbins 饰）因涉嫌杀害妻子及她的情人而锒铛入狱。在这座名为鲨堡的监狱内，希望似乎虚无缥缈，终身监禁的惩罚无疑注定了安迪接下来灰暗绝望的人生。",
		elmHeight: 0,
		score: 9.7,
	},
	{
		rank: 2,
		title: "霸王别姬",
		desc:
			"T段小楼（张丰毅）与程蝶衣（张国荣）是一对打小一起长大的师兄弟，两人一个演生，一个饰旦，一向配合天衣无缝，尤其一出《霸王别姬》，更是誉满京城，",
		elmHeight: 0,
		score: 9.6,
	},
	{
		rank: 3,
		title: "阿甘正传",
		desc:
			"阿甘（汤姆·汉克斯 饰）于二战结束后不久出生在美国南方阿拉巴马州一个闭塞的小镇，他先天弱智，智商只有75，然而他的妈妈是一个性格坚强的女性，她常常鼓励阿甘“傻人有傻福”，要他自强不息。",
		elmHeight: 0,
		score: 9.2,
	},
	{
		rank: 4,
		title: "这个杀手不太冷 Léon",
		desc:
			"里昂（让·雷诺饰）是名孤独的职业杀手，受人雇佣。一天，邻居家小姑娘马蒂尔达（纳塔丽·波特曼饰)敲开他的房门，要求在他那里暂避杀身之祸",
		elmHeight: 0,
		score: 9.4,
	},
	{
		rank: 5,
		title: "泰坦尼克号",
		desc:
			"1912年4月10日，号称 “世界工业史上的奇迹”的豪华客轮泰坦尼克号开始了自己的处女航，从英国的南安普顿出发驶往美国纽约。",
		elmHeight: 0,
		score:  9.3,
	},
	{
		rank: 6,
		title: "忠犬八公的故事",
		desc:
			"八公（Forest 饰）是一条谜一样的犬，因为没有人知道它从哪里来。教授帕克（理查·基尔 Richard Gere 饰）在小镇的火车站拣到一只走失的小狗",
		elmHeight: 0,
		score:  9.3,
	},
];
let vNode = null

function sortClick(e, vNodeArg) {
	const key = vNodeArg.data.on.click[1]
	originalData = originalData.sort((a, b) => {
		return a[key] > b[key]
	})
	render(vNode)
}
function addClick() {
	const num = Math.floor((Math.random()*10)+1);
	originalData.push({
		rank: 1,
		title: `肖申克的救赎${Math.floor((Math.random()*1000)+1)}`,
		desc:
			"20世纪40年代末，小有成就的青年银行家安迪（蒂姆·罗宾斯 Tim Robbins 饰）因涉嫌杀害妻子及她的情人而锒铛入狱。在这座名为鲨堡的监狱内，希望似乎虚无缥缈，终身监禁的惩罚无疑注定了安迪接下来灰暗绝望的人生。",
		elmHeight: 0,
		score: num,
	})
	render(vNode)
}
function render(VnodeArg) {
	vNode = patch(VnodeArg, h('div.content',[
		h('h1','豆瓣电影top10'),
		h('div.sort',[
			h('span.sortBy', 'sort by:'),
			h('span.btn', {
				on: {
					click: [sortClick, 'rank']
				}
			},
			'Rank'),
			h('span.btn', {
				on: {
					click: [sortClick, 'title']
				}
			}, 'Title'),
			h('span.btn', {
				on: {
					click: [sortClick, 'score']
				}
			},'score'),
		]),
		h('div.btn',{
			on: {
				click: addClick
			}
		},'添加'),
		h('div',
		originalData.map(setItem))
	]))
}
function setItem(item, index) {
	return h('ul.row',{
		key: item.title,
		style: {
			opacity: '0',
			delayed: { 
				opacity: '1' ,
				transform: `translateY(${index * 80}px);`,
			}
		}
	},[
		h('li', [
			h('span', item.rank),
			h('span', item.title),
			h('span', item.desc),
			h('span.btn.del', 'x')
		])
	])
}
// 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。
document.addEventListener('DOMContentLoaded',() => {
	const oldVnode = document.querySelector("#app")
	render(oldVnode)
})
